<template>
  <a-modal
    v-model="show"
    :maskClosable="false"
    :width="imgStyle.width"
    :footer="null"
    @cancel="$emit('close', false)"
  >
    <div class="deal-detail">
      <img v-if="image" :src="image" :style="imgStyle" />
      <Empty v-else></Empty>
    </div>
  </a-modal>
</template>

<script>
import Empty from "@/components/empty.vue";
export default {
  components: {
    Empty
  },
  data() {
    return {
      show: false
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    image: {
      type: String,
      required: true,
      default: ""
    },
    imgStyle: {
      type: Object,
      required: false,
      default: () => {
        return {
          width: "600px",
          height: "500px"
        };
      }
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(value) {
        this.show = value;
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 24px 0;
}
.deal-detail {
  min-height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
